<script setup>
import { ref, onMounted, watch, getCurrentInstance } from 'vue'
import myCanvas from '@/utils/myCanvas'


const props = defineProps({
    width: {
        type: Number,
        default: 0
    },
    height: {
        type: Number,
        default: 0
    },
    options: {
        type: Object,
    },
    imageFileUrl: {
        type: String,
        default: ''
    },
    oldImgRect: {
        type: Object,
    },
    pixelInfo: {
        type: Object,
    },
})

const instance = getCurrentInstance()


const queryParams = ref({
    imageFileUrl: ''
})

const canvasRect = ref({
    width: 0,
    height: 0,
})

let maskCanvas

// 绘图并且导出图片
function loadDrawImage() {
    return new Promise(resolve => {

        const { topOffset = 0, rightOffset = 0, bottomOffset = 0, leftOffset = 0 } = props.options || {};


        canvasRect.value = {
            width: props.width + leftOffset + rightOffset,
            height: props.height + topOffset + bottomOffset
        }

        setTimeout(() => {
            maskCanvas = new myCanvas('maskCanvas', instance)
            setTimeout(() => {
                const x = leftOffset;
                const y = topOffset;

                maskCanvas.drawImage(props.imageFileUrl, x, y, props.width, props.height,
                    () => {
                        maskCanvas.clearRect(0, 0, canvasRect.value.width, canvasRect.value.height)
                        maskCanvas.drawRect(0, 0, canvasRect.value.width, canvasRect.value.height, 'red')
                    },
                    async () => {
                        await exportCanvasImage()
                        resolve(queryParams.value.imageFileUrl)
                    });
            }, 1000)
        }, 1000)

    })


}


// 导出canvas图片
function exportCanvasImage() {
    return new Promise(resolve => {
        const { topOffset = 0, rightOffset = 0, bottomOffset = 0, leftOffset = 0 } = props.pixelInfo || {};

        const destWidth = props.oldImgRect.width + leftOffset + rightOffset
        const destHeight = props.oldImgRect.height + topOffset + bottomOffset

        uni.canvasToTempFilePath({
            canvas: maskCanvas.canvas,
            x: 0,
            y: 0,
            // width: rectAndImgCanvas.value.width - 4,
            // height: rectAndImgCanvas.value.height - 8,
            destWidth,
            destHeight,
            success(res) {
                console.log(res.tempFilePath, '导出图片成功');
                queryParams.value.imageFileUrl = res.tempFilePath
                resolve()
            },
        })
    })
}

defineExpose({
    loadDrawImage
})
</script>

<template>
    <div class='maskCanvas_box'>
        <canvas type="2d" class='maskCanvas' id='maskCanvas'
            :style="{ width: canvasRect.width + 'px', height: canvasRect.height + 'px' }"></canvas>
    </div>
</template>

<style lang='scss' scoped>
.maskCanvas_box {
    position: fixed;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;

    .maskCanvas {
        width: 100%;
        height: 100%;
    }
}
</style>